<template>
    <div>
		<div v-if="chenload">
		  <!--搜索-->
			<div class="searchtop">
				<div class="search">
					<div class="searchtext">
						<img src="../../../src/assets/img/shouye/sousuo.png" alt="" class="i1">
						<input type="text" placeholder="请输入相关课程关键字" v-model="input" @focus="bol = false" class="input1">
					</div>
						<span @click="search()" style="color:rgba(51,51,51,1);">搜索</span>
				</div>

				<!--下拉框-->
				<div class="rel">
					<div style="width:6.9rem;margin:auto;display: flex;justify-content:space-around;height: 0.8rem;align-items: center;background: #fff;">
						<!--第一个联动-->
						<div class="shang" @click="btn()" >
						<span :class="quanbu?'blue':'gray'">{{pracite}}</span>
						<img :src="quanbu?imgSrc1:imgSrc2" alt="">
					
						</div>
					
						<!--第二个联动-->
					
						<div class="shang" @click="btn1()" >
						<span :class="quanbu1?'blue':'gray'">{{pracite1}}</span>
						<img :src="quanbu1?imgSrc1:imgSrc2" alt="">
					
						</div>
						<!--第三个联动-->
						<div class="shang" @click="btn2()" >
						<span :class="quanbu2?'blue':'gray'">{{pracite2}}</span>
							<img :src="quanbu2?imgSrc1:imgSrc2" alt="">
						</div>
					</div>
				<div class="pos">
					<div style="overflow-y:scroll;max-height:5rem">
					<transition name="fade">
					<!--第一个-->

					<div  v-if="quanbu" style="background: #fff">
						<div class="xia" v-for="(item,index) in one" @click="xi(item,index)">
						<span :class="item.class_name == pracite?'spanspan1':'spanspan'">{{item.class_name}}</span>
						<img src="../../../src/assets/img/search/dui.png" alt="" v-if="item.class_name == pracite">
						<p></p>
						</div>
					</div>

					<!--第二个-->
					<div  v-if="quanbu1" style="background: #fff">
						<div class="xia" v-for="(item,index) in two" @click="xi1(item,index)">
						<span :class="item.name == pracite1?'spanspan1':'spanspan'">{{item.name}}</span>
						<img src="../../../src/assets/img/search/dui.png" alt="" v-if="item.name == pracite1">
						<p></p>
						</div>
					</div>

					<!--第三个-->
					<div  v-if="quanbu2" style="background: #fff">
						<div class="xia" v-if="quanbu2" v-for="(item,index) in t" @click="xi2(item)">
						<span :class="item.name == pracite2?'spanspan1':'spanspan'">{{item.name}}</span>
						<img src="../../../src/assets/img/search/dui.png" alt="" v-if="item.name == pracite2">
						<p></p>
						</div>
					</div>

					</transition>
					</div>
				</div>
				
				</div>
		  </div>
		  <!--内容-->
			<div>
			<!-- <div :class="searchBarFixed?'mar':'pad'"> -->
				<mescroll-vue ref="mescroll0" :up="getMescrollUp(0)" @init="mescrollInit0">
					<div id="dataList0">
						<div class="n" v-for="(item,index) in tab0.list" @click="tapclick(item)">
							<img :src="img+item.thumb" alt="" class="img1">
							<div class="right">
								<p>{{item.name}}</p>
								<p class="righttwo">
									<!-- <span>{{item.tag_name}}</span> -->
									<span><img src='../../../src/assets/img/colorren.png' mode=""/>{{item.hits}}人已加入</span>
									<span v-if="item.price==0.00||item.price=='0.00'||item.price==0||item.price=='0'" class="pricefree">免费</span>
									<span v-else>￥{{item.price}}</span>
								</p>
							</div>
						</div>
					</div>
				</mescroll-vue>

			</div>
		</div>
		<div class="loadmore" v-else>
			<img src="../../../src/assets/img/load.gif" alt="">
		</div>

    </div>

</template>

<script>
  // import { MessageBox } from 'mint-ui';
	import MescrollVue from 'mescroll.js/mescroll.vue'
    export default {
        name: "zhiyejieguo",
				components: {
				  MescrollVue
				},
      data(){
          return{
						imgSrc: require("../../assets/img/kongbai.png"), 
						imgSrc1: require("../../assets/img/search/shang.png"), 
						imgSrc2: require("../../assets/img/search/bto.png"), 
						tab0: {mescroll: null, list: [], isListInit: false}, // 全部
						tabType:0,
			      chenload:false,
            b:false,
						loadzheng:false,
						noloadzheng:false,
            img:this.$store.state.img,
            bol:true,
            quanbu:false,
            quanbu1:false,
            quanbu2:false,
            arr:[],
			      allLoaded:false,
            input:'',
            pracite:'全部专业',
            pracite1:'全部分类',
            pracite2:'全部',
            one:[],
            two:[
              {
                name:'全部分类',
                sub_id:''
              }
            ],
            t:[
              {
                name:'全部类型',
                lass_id:''
              }
            ],
            class_id:'',
            sub_id:'',
            lass_id:'',
            searchBarFixed:false,
			      page:1,
          }
      },
      methods:{
				// 点击跳转
				tapclick(item){
					// console.log(11);
					var tag = item.tag;
					var id = item.id;
					// tag 1  2班级  3专题 4课程
					if(tag==4||tag=='4'){
						var type = item.type;
							this.$router.push({
								path:'/course',
								query:{
								 cid:id
								}
							})
						
					}else if(tag==3||tag=='3'){
							this.$router.push({
							path:'/specialtopic',
							query:{
							 stid:id
							}
						})
					}else{
						this.$router.push({
						path:'/class',
						query:{
						 bid:id
						}
					 })
					}
				},

        search(){
					var newinput = this.inputarrnew;
					var a=0;
					var b=0;
					if(newinput.length!='0'||newinput.length!=0){
						for(var i=0;i<newinput.length;i++){
							if(this.input==newinput[i]){
								a++
							}else{
								b++
							}
						}
					}else{
						this.inputarrnew = newinput.concat(this.input);
						localStorage.setItem('inputarr',JSON.stringify(this.inputarrnew));
					}
					
					if(a==1||a=='1'){
						localStorage.setItem('inputarr',JSON.stringify(this.inputarrnew));
					}else if(b==1||b=='1'){
						this.inputarrnew = newinput.concat(this.input);
						localStorage.setItem('inputarr',JSON.stringify(this.inputarrnew));
					}else if(a==0||a=='0'){
						this.inputarrnew = newinput.concat(this.input);
						localStorage.setItem('inputarr',JSON.stringify(this.inputarrnew));
					}else if(b==0||b=='0'){
						localStorage.setItem('inputarr',JSON.stringify(this.inputarrnew));
					}
          sessionStorage.setItem('input',this.input);
					this.pracite2 = '全部类型'
					this.pracite = '全部专业'
					this.pracite1 = '全部分类'
					this.sub_id = '';
					this.class_id = '';
					this.lass_id = '';
					this.changeTab();
        },
        btn(){
         this.quanbu = !this.quanbu;
          this.quanbu1 = false;
          this.quanbu2 = false;
        },
        btn1(){
          this.quanbu1 = !this.quanbu1;
          this.quanbu = false;
          this.quanbu2 = false;
        },
        btn2(){
          this.quanbu2 = !this.quanbu2;
          this.quanbu = false;
          this.quanbu1 = false;
        },
        xi(item,index){
          //点击第一个联动
          this.pracite = item.class_name;
          this.quanbu = !this.quanbu;
		  
          this.class_id = item.class_id;
					// this.chenload=false;
					this.changeTab();


        },
        xi1(item,index){
          this.pracite1 = item.name;
          this.quanbu1 = !this.quanbu1;

          if (index!=0){
            this.thre(index)
          }else {
            this.t = [{
              name:'全部类型',
              lass_id:''
            }]
            this.pracite2 = '全部类型'
            this.lass_id = '';
          }

          this.pracite2 = '全部类型'
          this.sub_id = item.sub_id;
					this.changeTab();
//           this.page=1;
//           this.information(0);
        },
        xi2(item){
          this.pracite2 = item.name;
          this.quanbu2 = !this.quanbu2;

          this.lass_id = item.lass_id;
					this.changeTab();
					
        },
        thre(index){
        //获取第三个
          this.t = this.two[index].lass;
          for (var i = 0;i<this.t.length;i++){
            if (this.t[i].lass_id == ''){
              this.t.splice(0,1);
            }
          }

          var obj = {
            name:'全部类型',
            lass_id:''
          }
          this.t.unshift(obj);
        },
				changeTab () {
					this.tab0.list = []// 在这里手动置空列表,可显示加载中的请求进度
					this.getTabData(0).mescroll.resetUpScroll() // 刷新列表数据
				},
				getTabData (tabType) {
				  if (tabType == null) tabType = this.tabType;
				  if (tabType === 0) {
				    return this.tab0;
				  }
				},
				mescrollInit0 (mescroll) {
				  this.tab0.mescroll = mescroll;
				},
				getMescrollUp (tabType) {
					// let emptyWarpId = 'dataList0';
				  return {
				    auto: true,
				    callback: this.upCallback, // 上拉回调,此处可简写; 相当于 callback: function (page) { upCallback(page); }
				    noMoreSize: 5, // 如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
						 empty: {
						  warpId: 'dataList0', // 父布局的id;
						  icon: this.imgSrc, // 图标,默认null
						  tip: '暂时没有找到您所需要的内容…', // 提示
						  
						},
				    
				  }
				},
				upCallback (page, mescroll) {
					var that = this;
					// setTimeout(function(){
						that.axios.get(that.$store.state.url +'course/search',{
							params:{
								keyword:sessionStorage.getItem('input'),
								class_id:that.class_id,
								sub_id:that.sub_id,
								lass_id:that.lass_id,
								page:page.num,
								limit:page.size,
								new:1,
							},
						}).then(res=>{
							if(res.data.errcode==0||res.data.errcode=='0'){
								this.chenload=true;
								var curPageData = res.data.data;
								  mescroll.endSuccess(curPageData.length);// 联网成功的回调,隐藏下拉刷新和上拉加载的状态;
								 if (page.num === 1) this.tab0.list = []; // 如果是第一页需手动制空列表
								 this.tab0.list = this.tab0.list.concat(curPageData); // 追加新数据
								 // this.tab0.list=res.data.data.order
								}
							// }
						})
				},

      },
      mounted() {
				this.sdk.getJSSDK('','',this.$store.state.url);	

          //获取一级联动
					this.axios.get(this.$store.state.url + "course/classCate").then(res=>{
						if (res.data.errcode == 0||res.data.errcode == '0'){
							this.one = res.data.data
							var obj = {
								class_name:'全部专业',
								class_id:''
							}
							this.one.unshift(obj);
						}
					})
			
				//获取二级联动
				this.axios.get(this.$store.state.url + "course/subCategory").then(res=>{
					if (res.data.errcode == 0||res.data.errcode == '0'){
						this.chenload=true;
						this.two = res.data.data
						var obj = {
							name:'全部分类',
							sub_id:''
						}
						this.two.unshift(obj);
					console.log(this.two)
					}
				})
					
				this.input = sessionStorage.getItem('input');
				if(localStorage.inputarr){
					// console.log(8989)
					this.inputarrnew = JSON.parse(localStorage.getItem('inputarr'));
				}else{
					this.inputarrnew = [];
				}

      },
      computed:{

      }
    }
</script>

<style scoped>
	.searchtop{
		position: fixed;
		top: 0;
		background: #fff;
		width: 7.5rem;
		z-index: 9999;
	}
	.mescroll {
	  position: fixed;
	  top: 1.5rem;
	  bottom: 0;
	  height: auto;
	}
  .rel{
    position: relative;
    background: #fff;
  }
  
  .mar{
    margin-top: 0.8rem;
    padding-bottom: 0.4rem;
    background: #fff;
    overflow: hidden
  }
	.pricefree{
		color: #0287FF !important;
	}
    .search{
      width: 92%;
      margin: auto;
      height: 0.56rem;
      margin-top: 0.2rem;
    	display: flex;
    	justify-content: space-around;
      /* position: relative; */
    }
    .searchtext{
    	width: 5.9rem;
    	height: .56rem;
    	background: #F0F0F0;
    	border-radius:0.28rem;
    	border:0.01rem solid #EDEDED;
			overflow: hidden;
    }
    .input{
      width: 4.2rem;
      height: 100%;
      font-size:0.24rem;
      color:rgba(153,153,153,1);
      /* text-indent: 1.58rem; */
      outline: none;
      -webkit-appearance: none;
      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    	background: #F0F0F0;
			text-align: center;
    }
    .input1{
      width: 5rem;
      height: 100%;
      font-size:0.24rem;
      color:rgba(153,153,153,1);
      /* text-indent: 1.58rem; */
      outline: none;
      -webkit-appearance: none;
      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    	background: #F0F0F0;
			text-align: center;
    }
    .search span{
      font-size:0.28rem;
      margin-left: 0.3rem;
    	display: inline-block;
    	line-height: .56rem;
    }
    .i{
      width: 0.32rem;
     height: .32rem;
     margin-left: 1.19rem;
     margin-top: .13rem;
    }
    .i1{
       width: 0.32rem;
      height: .32rem;
      margin-left: .1rem;
      margin-top: .13rem;
    }
    .n{
      width: 92%;
      margin: auto;
      margin-top: 0.2rem;
			display: flex;
			justify-content: flex-start;
    }
		/* .n{
		} */
  .img1{
    width: 2.1rem;
    height: 1.18rem;
    border-radius:0.08rem;
		overflow: hidden;
  }
  .right{
    width: calc(92% - 2.1rem);
    height: 100%;
    margin-left: .2rem;
    display: flex;
    flex-wrap: wrap;
    align-content: space-around;
  }
  .right p{
    width: 100%;
  }
  .right p:nth-child(1){
	height: .6rem;
    font-size:0.28rem;
    color:rgba(51,51,51,1);
    line-height:0.32rem;
    overflow: hidden;
    text-overflow: ellipsis;
    overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
  }
  .right .righttwo{
    margin-top: 0.18rem;
  }
  .right .righttwo span:nth-child(1){
    box-sizing: border-box;
    font-size: 0.24rem;
    line-height:0.32rem;
	color: #C2C9D3;
  }
  .right .righttwo span:nth-child(1) img{
	  width: .32rem;
	  height: .32rem;
	  vertical-align: middle;
  }
    .right .righttwo span:nth-child(2){
      float: right;
      font-size:0.3rem;
      font-weight:bold;
      color:rgba(255,2,20,1);
      line-height:0.32rem;
    }
  .shang{
   width: 30%;
    height: 0.5rem;
    display: flex;
    align-items: center;
  }
  .shang:nth-child(2){
    justify-content: center;
  }
  .shang:nth-child(3){
    display: flex;
    justify-content: flex-end;
  }
  .blue{

    font-size:0.26rem;
    color:rgba(2,135,255,1);
  }
  .gray{
    font-size:0.26rem;
    color:rgba(51,51,51,1);
  }
  .shang img{
    width: 0.15rem;
    height: 0.12rem;
    margin-left: 0.14rem;
  }
  .xia{
    width: 92%;
    margin: auto;

    /*margin-top: 0.2rem;*/
   padding-top: 0.2rem;
  }
  .spanspan{
      font-size:0.28rem;
      color:rgba(51,51,51,1);
    vertical-align: middle;
  }
  .spanspan1{
    font-size:0.28rem;
    color:rgba(2,135,255,1);
    vertical-align: middle;
  }
  /*.xia:hover .spanspan{*/
    /*color:rgba(2,135,255,1);*/
  /*}*/
  .xia img{
    width: 0.32rem;
    vertical-align: middle;
    float: right;
  }
  .xia p{
    width: 100%;
    height: 0.02rem;
    background:rgba(237,237,237,1);
    margin-top: 0.2rem;
  }
  .pos{
    width:7.5rem;

    position: absolute;
    top: 0.7rem;
    left: 0;
  }
  /*.one{*/
    /*display: inline-block;*/
  /*}*/
    .fade-enter-active, .fade-leave-active {
      transition: opacity 0.25s ease-out;
    }

    .fade-enter, .fade-leave-to {
      opacity: 0;
    }
</style>
